<template>
    <div id="app" class="arb" v-loading="loading"
        style="min-height: 100%;"
    >
        <div class="title">
            <a class="backPage iconfont icon-icon-test" @click="$router.back(-1)"></a>
            仲裁详情
            <div class="rightBotttom">
                <a class="iconfont icon-xiangyoujiantou-copy" style="font-size:21px;"
                    @click="hanldeQuiteNav('prve')"
                ></a>
                <a class="iconfont icon-xiangyou-copy"
                    @click="hanldeQuiteNav('next')"
                ></a>
            </div>
        </div>
        <template
            v-if="!loading"
        >
            <el-form class="form" label-position="top">
                <el-row :gutter="40" class="other">
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="任务标题">
                                <div class="ell">
                                    {{
                                        baseLink.taskTitle
                                    }}
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="单价">
                                <font color="#F30">
                                    {{
                                        baseLink.unitPrice
                                    }}
                                </font>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="接单ID">
                                <router-link class="blue" :to="'/task/acceptDetail?acceptId='+ baseLink.acceptId">
                                    {{
                                        baseLink.acceptId
                                    }}
                                </router-link>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="任务ID">
                                <router-link class="blue"  :to="'/task/detail?taskId='+baseLink.taskId">
                                    {{
                                        baseLink.taskId
                                    }}
                                </router-link>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="分类">
                                {{
                                    baseLink.sortName
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="仲裁状态">
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 0"
                                >待处理</font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 1"
                                >派单人胜</font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 2"
                                >接单人胜 </font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 3"
                                >派单人复审</font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 4"
                                >接单人复审</font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 5"
                                >双方复审</font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 6"
                                >判平-释放任务</font>
                                <font color="#acacac"
                                    v-if="baseLink.atStatus == 7"
                                >判平-清算任务</font>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="完成终端">
                                安卓
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="派单人">
                                <div class="userHead"
                                    @click="$router.push(`/user/detail/${pushUserInfo.id}`)"
                                >
                                    <img :src="pushUserInfo.avatar" class="square" />
                                    {{
                                        pushUserInfo.nick_name
                                    }}
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="接单人">
                                <div class="userHead"
                                    @click="$router.push(`/user/detail/${acceptUserInfo.id}`)"
                                >
                                    <img :src="acceptUserInfo.avatar" class="square" />
                                    {{
                                        acceptUserInfo.nick_name
                                    }}
                                </div>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="任务难度">
                        {{
                            baseLink.diffcultyLevel
                        }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="任务发布时间">
                                {{
                                    baseLink.taskPushTime
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="接任务时间">
                                {{
                                    baseLink.drawTaskTime
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="完成时间">
                                {{
                                    baseLink.achieveTaskTime
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="仲裁时间">
                                {{
                                    baseLink.arbitrateTaskTime
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="后台处理时间">
                                {{
                                    baseLink.customClearTime
                                }}
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple">
                            <el-form-item label="后台处理客服">
                                <el-tooltip class="item" 
                                    effect="dark" :content="baseLink.dealer.join('/')" 
                                    placement="top-start"
                                >
                                        <div class="oneOmit">
                                            {{
                                                baseLink.dealer.join('/')
                                            }}
                                        </div>
                                </el-tooltip>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <el-tabs value="record" type="card">
                <el-tab-pane label="仲裁记录" name="record">
                    <div class="arb_timeline">
                        <div class="li clearfix"
                            v-for="(recordItem,recordIndex) of recordList"
                            :key="recordItem.id"
                        >
                            <i class="num">
                                {{
                                    recordIndex + 1
                                }}
                            </i>
                            <div class="info">
                                <h3>
                                    {{
                                        countTrialDate(recordItem.time_created * 1000)
                                    }}
                                </h3>
                                <div>
                                    行为：{{recordItem.opration}}<br />
                                    原因：{{recordItem.remark}}<br />
                                    <div class="videoImgList clearfix"
                                        v-for="(fileItem,fileIndex) of recordItem.mate"
                                        :key="fileIndex + 'file'"
                                    >
                                        <template>
                                            <template v-if="isFile(fileItem.url)=='video'">
                                                <div @click="openFile(fileItem.url)">
                                                    <img src="../../../../static/img/video.png" style="padding:8%;" />
                                                </div>
                                            </template>
                                            <template v-else-if="isFile(fileItem.url)=='photo'">
                                                <div @click="openFile(fileItem.url)">
                                                    <img :src="fileItem.url" />
                                                </div>
                                            </template>
                                        </template>
                                    </div>
                                    <template v-if="recordItem.accept_close_time > 0">
                                        <div class="cuwn">接单人复审上传倒计时：
                                            {{
                                                commitTimeObj.acceptCloseTime || ''
                                            }}
                                        </div>
                                    </template>
                                    <template v-if="recordItem.publish_close_time > 0">
                                        <div class="cuwn">派单人复审上传倒计时：
                                            {{
                                                commitTimeObj.publishCloseTime || ''
                                            }}
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="任务步骤" name="step">
                    <task-step 
                        mode="preview" 
                        :taskSteps="taskSteps"
                    />
                </el-tab-pane>
            </el-tabs>
            
            <div class="startBtn background" @click="taskOperateLockApi('lock')"
                v-if="baseLink.atStatus == 0"
            >
                开始<br />审批
            </div>
            <el-dialog title="仲裁审批" :visible.sync="handleShow" width="600px" top="100px"
                :close-on-click-modal="false"
                :show-close="false"
            >
                <el-form label-position="top">
                    <el-row :gutter="35">
                        <el-col :span="24" style="margin-top:-10px;">
                            <el-form-item>
                                <el-radio-group
                                    v-model="atPopStatus"
                                    @change="changeAtPopText"
                                >
                                    <el-radio :label="1" class="elradio">派单人胜</el-radio>
                                    <el-radio :label="2" class="elradio">接单人胜</el-radio>
                                    <el-radio :label="3" class="elradio">派单人复审</el-radio>
                                    <el-radio :label="4" class="elradio">接单人复审</el-radio>
                                    <el-radio :label="5" class="elradio">双方复审</el-radio>
                                    <el-radio :label="6" class="elradio">判平/释放任务</el-radio>
                                    <el-radio :label="7" class="elradio">判平/清算任务</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24" style="margin-top:10px;">
                            <el-form-item label="原因">
                                <el-input type="textarea" rows="5" placeholder="请输入内容"
                                    v-model="atPopText"
                                >
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="taskOperateLockApi('unlock')">取 消</el-button>
                    <el-button type="primary" 
                        :loading="dispostBtnLoad"
                        @click="postDisposeArbitrationApi">确 定</el-button>
                </span>
            </el-dialog>
        </template>
    </div>
</template>

<script>
    import ArbitrationDetail from './index.js';
    export default ArbitrationDetail;
</script>
<style>
    .arb .el-tabs--card>.el-tabs__header{
        border-bottom: 1px solid #f1f1f1;
    }
    .arb .titles{
        display:none;
    }
</style>
<style lang="scss" scoped>
    .form{
    margin-top:30px;
    border-top:1px solid #FFF;
    }
    .other{
        margin-bottom:25px!important;
    }
    .titles{
    margin-top:25px;
    margin-bottom:12px;
    font-size:19px;
    }
    .progress{
    height:40px;
    line-height:40px;
    overflow:hidden;
    .elPr{
        vertical-align: middle;
        margin-right:13px;
    }
    }
    .filter{
    width:100%;
    }
    .other{
    margin-bottom:40px;
    }
    .rightBotttom{
    float:right;
    a{
        height:36px;
        line-height:36px;
        text-align:center;
        display:block;
        margin-right:25px;
        font-size:23px;
        cursor: pointer;
        border-radius:3px;
        float:left;
        color:#d9d9d9;
        &:nth-last-child(1){
        margin-right:0;
        }
    }
    }
    .cuwn{
        color:#F30;
    }

    .arb_timeline{
        margin-top:30px;
        .li{
            padding-bottom:25px;
            position:relative;
            &:before{
                content:" ";
                position:absolute;
                top:0;
                height:100%;
                left:12.5px;
                background:#F6F6F6;
                width:1px;
            }
            &:nth-last-child(1):before{display:none;}
            .num{
                font-size:14px;
                width:25px;
                height:25px;
                line-height:25px;
                border-radius:50%;
                float:left;
                background:#F1F1F1;
                text-align:center;
                font-style:normal;
                position:relative;
                z-index:1;
            }
            .info{
                float:left;
                padding-left:25px;
                width:calc(100% - 25px);
                &>h3{
                    font-weight:normal;
                    color:#0F0F0F;
                    font-size:15px;
                    line-height:25px;
                }
                &>div{
                    color:#6e6e6e;
                    font-size:15px;
                    line-height:38px;
                    margin-top:8px;
                }
                .videoImgList{
                    padding-top:15px;
                    div{
                        width:160px;
                        height:160px;
                        margin-bottom:20px;
                        margin-right:20px;
                        position:relative;
                        background:#000;
                        cursor: pointer;
                        float:left;
                        &:nth-child(4n){
                            margin-right:0;
                        }
                        img{
                            display: block;
                            object-fit: cover;
                            height:100%;
                            width:100%;
                        }
                    }
                }
            }
        }
    }
    .startBtn{
        width: 75px;
        height: 75px;
        border-radius: 50%;
        text-align: center;
        color: #FFF;
        line-height: 20px;
        padding-top: 18px;
        position: fixed;
        right: 60px;
        bottom: 60px;
        font-size: 15px;
        cursor:pointer;
        box-shadow: 0px 0px 10px #8cc5ff;
        transition: 0.2s all;
        z-index:1001;
        &:hover{
            opacity: 0.9;
        }
    }
    .elradio{
        width:calc((100% - 60px) / 3);
        margin-top:25px;
        &:nth-child(3n){
            margin-right:0;
        }
        &:nth-child(1),&:nth-child(2),&:nth-child(3){
            margin-top:10px;
        }
    }
</style>